<template>
  <div>
    <div style="background-color: #FFFFFF;width: 100%;height: 900px">
      <!--      上半部分统计-->
      <div style="padding: 30px">
        <div style="font-size: 20px;font-weight: 500;margin-bottom: 20px">余额提现</div>
        <div style="width: 1553px;height: 300px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);padding-top: 20px">
          <el-form ref="form" :model="form" :rules="rules" label-width="180px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="县区：" prop="remark">
                  <el-input style="width: 400px" v-model="charts.countyName" disabled placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账号：" prop="remark">
                  <el-input style="width: 400px" v-model="charts.cityAccountName" disabled placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                    <el-form-item label="提现账号：" prop="remark">
                      <el-input style="width: 400px" v-model="charts.cashFromAccountName" disabled placeholder="请输入内容"/>
                    </el-form-item>
              </el-col>
              <el-col :span="12">
            <el-form-item label="账号可提现余额：" prop="remark">
              <el-input style="width: 400px" v-model="charts.remainCashAmount" disabled  placeholder="请输入内容"/>
            </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="到账银行卡号：" prop="bankCardNumber">
                  <el-select v-model="form.bankCardNumber" @change="teamList" filterable placeholder="请选择" style="width: 400px">
                    <el-option
                      v-for="item in charts.bankCardList"
                      :key="item.bankCardNumber"
                      :label="item.bankCardNumber"
                      :value="item.bankCardNumber"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请金额：" prop="takeCashAmount">
                  <el-input style="width: 400px" v-model="form.takeCashAmount"  placeholder="请输入申请的金额"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="银行卡的手机号：" prop="phone">
                  <el-input style="width: 400px" v-model="form.phone" disabled placeholder="请输入内容"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item style="width: 580px" label="短信验证码：" prop="validateCode">
              <el-input placeholder="短信验证"   v-model="form.validateCode"></el-input>
              <button @click.prevent="getCode()"  class="code-btn" :disabled="!show">
                <span v-show="show">获取验证码</span>
                <span v-show="!show" class="count">{{count}}</span>
              </button>
            </el-form-item>
            </el-col>
            </el-row>
            <div style="display: flex;justify-content: center">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <div style="padding: 30px">
        <div style="font-size: 20px;font-weight: 500;margin-bottom: 20px">余额提现记录</div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
          <el-form-item label="提现订单编号" prop="proCode">
            <el-input v-model="queryParams.proCode" placeholder="请输入提现订单编号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="到账银行卡号" prop="productName">
            <el-input v-model="queryParams.productName" placeholder="请输入到账银行卡号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="inventoryList">
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column label="提现订单编号" align="center" prop="bankCardNumber" />
          <el-table-column label="账号余额" align="center" prop="amount" />
          <el-table-column label="申请金额" align="center" prop="remain" />
          <el-table-column label="到账银行卡号" align="center" prop="bankCardNumber" />
          <el-table-column label="申请时间" align="center" prop="createDatetime"></el-table-column>
          <el-table-column label="审核时间" align="center" prop="updateDatetime" />
          <el-table-column label="审核状态" align="center" prop="status" >
            <template slot-scope="scope">
              <el-tag>
                {{ scope.row.status==0?'待审核':scope.row.status==1?"已通过":"未通过" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="反馈" align="center" prop="remark" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
import { analyseData, applyFromPage, authCode, bankCardlist, cash, cashtake } from '@/api/property/property'
import { orderauth, sendSmsCode } from '@/api/order'

export default {
  name: 'overview',
  data(){
    return{
      queryParams: {
        current: 1,
        size: 10,
        bankCardNumber: null,
        status: null,
        orderNumber: null,
        startDatetime: null,
      },
      show:true,
      activeIndex:'0',
      count:60,
      form:{
        bankCardNumber:'',
        takeCashAmount:'',
        validateCode:'',
        phone:'',
      },
      rules:{
        bankCardNumber:[
          { required: true, message: '必须选择银行卡号', trigger: 'change' }
        ],
        takeCashAmount:[
          { required: true, message: '请输入所需要的', trigger: 'change' }
        ],
        validateCode:[
          { required: true, message: '验证码', trigger: 'change' }
        ],
      },
      status_switch:false,
      total:null,
      loading:false,
      charts:{},
      inventoryList:[]
    }
  },
  created() {
    this.getList()
    // 获取表单信息
    this.forminfo()
    this.hanrdlist()
  },
  methods:{
    getList(){
      this.loading = true
      applyFromPage(this.queryParams).then(res=>{
        this.inventoryList = res.pageData
        this.loading = false
        this.total = Number(res.total)
      })
    },
    //银行卡提现
    hanrdlist(){
      bankCardlist(this.querybankCard).then(res=>{
        this.dialogTableVisible = true
        this.gridData = res.pageData
      })
    },
    teamList(e){
      const a = this.charts.bankCardList.find(i =>i.bankCardNumber == e)
      this.form.phone = a.accountHolderPhone
    },
    forminfo(){
      cash().then(res =>{
        this.charts = res
        this.form.phone = res.accountPhone
      })
    },
    submitForm(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          cashtake(this.form).then(res=>{
            this.form = {
              bankCardNumber:'',
                takeCashAmount:'',
                validateCode:'',
                phone:'',
            }
            this.getList()
            this.$message.success('退款成功')
          })
        }})
    },
    getfalg(e){
      e==3?this.queryParams.status=null:e==0?this.queryParams.status=0:e==1?this.queryParams.status=1:this.queryParams.status=2
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.queryParams)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 获取短信验证码
    getCode() {
      //axios请求
      console.log(this.form.phone);
      // 验证码倒计时
      if (!this.timer)
        authCode(this.form.phone).then(res =>{
          this.$message.success('验证码发送成功')
        })
      this.count = 60;
      this.show = false;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= 60) {
          this.count--;
        } else {

          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
  }
}
</script>

<style scoped>
.card-1{
  width: 220px;
  height: 80px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.card-1-text{

}
.card-1-text-top{
  font-size: 20px;
  margin-bottom:10px ;
}
.botten-yes {
  width: 138px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(24, 144, 255, 0.15);
  box-sizing: border-box;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  border-color: #1890FF;
}

.botten-no {
  width: 138px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-width: 0px 0px 0px 0px;
  border-style: solid;
}
.pr {
  position: relative;
}
.code-btn {
  width: 100px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 222;
  color: #ef8466;
  font-size: 14px;
  border: none;
  border-left: 1px solid #bababa;
  padding-left: 10px;
  background-color: #fff;
  cursor: pointer;
}
</style>
